import { IndexBar, NavBar, SearchBar, Space, Tag } from 'antd-mobile'
import React, { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { getCityApi } from '../../api/city'

const City = () => {
    const nav = useNavigate()
    const [data, setData] = useState([])
    const getData = async () => {
        const resp = await getCityApi()
        console.log(resp.data.data);
        setData(resp.data.data)
    }
    useEffect(() => {
        getData()
    }, [])

    const getCity=(city)=>{
        nav("/")
        localStorage.setItem('city', city)
    }
    return (
        <div style={{ height: '100vh' }}>
            <NavBar onBack={() => nav(-1)}>
                <SearchBar placeholder='请输入内容' />
            </NavBar>
            <h2 style={{ padding: "10px" }}>热门城市</h2>
                <Space style={{ flexWrap: 'wrap' }}>
                    {
                        data.hotCities && data.hotCities.map((v, i) => {
                            return <Tag key={i} 
                             onClick={()=>getCity()}
                            >{v.name}</Tag>
                        })
                    }
                </Space>
                <IndexBar >
                    {data.cityList && data.cityList.map((v, i) => {
                        return (
                            <IndexBar.Panel  key={i} index={v.title}>
                                <div>
                                    {
                                        v.items.map((v, i) => {
                                            return <div key={i} 
                                             onClick={()=>getCity()}
                                            >{v.name}</div>
                                        })
                                    }
                                </div>
                            </IndexBar.Panel>
                        )
                    })}
                </IndexBar>


        </div>
    )
}

export default City
